import React from "react";
import ControlPanel from "./components/ControlPanel";
import VideoStream from "./components/VideoStream";
import Data from "./components/Data";
import {
  Container,
  Typography,
  ThemeProvider,
  CssBaseline,
  Box,
  Divider,
  Paper,
} from "@mui/material";
import theme from "./theme";

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />

      {/* 页面容器，固定100vh */}
      <Box sx={{ width: "100vw", height: "100vh", bgcolor: "#f5f5f5", overflow: "hidden" }}>
        <Container maxWidth={false} disableGutters sx={{ px: 6, py: 3, height: "100%" }}>
          {/* 所有内容放在一个 Paper 中，视觉整合 */}
          <Paper
            elevation={3}
            sx={{
              height: "100%",
              borderRadius: 3,
              p: 3,
              display: "flex",
              flexDirection: "column",
              gap: 2,
              bgcolor: "#ffffff",
              overflow: "hidden",
            }}
          >
            {/* 标题：放进内部顶部 */}
            <Typography
              variant="h5"
              align="center"
              sx={{
                color: theme.palette.primary.main,
                fontWeight: 600,
                textShadow: "1px 1px 2px rgba(0,0,0,0.05)",
              }}
            >
              🚗 智能巡检小车控制系统
            </Typography>

            {/* 主体内容（左右分布） */}
            <Box sx={{ display: "flex", gap: 3, flex: 1, overflow: "hidden" }}>
              {/* 左侧控制面板 */}
              <Box
                sx={{
                  flex: 1,
                  overflowY: "auto",
                }}
              >
                <ControlPanel />
              </Box>

              {/* 右侧视频 + 数据 */}
              <Box
                sx={{
                  flex: 1,
                  display: "flex",
                  flexDirection: "column",
                }}
              >
                {/* 视频区域 */}
                <Box sx={{ height: "60%", overflow: "hidden", mb: 2 }}>
                  <VideoStream />
                </Box>

                <Divider />

                {/* 数据展示区域 */}
                <Box sx={{ height: "40%", overflowY: "auto", mt: 2 }}>
                  <Data />
                </Box>
              </Box>
            </Box>
          </Paper>
        </Container>
      </Box>
    </ThemeProvider>
  );
}
